<template>
  <div class="boxsear">
    <!-- 头部搜索 -->
    <div class="top">
      <span @click="add" class="iconfont icon-31sousuo"></span>
      <input  v-model="value" type="text" placeholder="假如被女巫缠住" />
      <div @click="del">取消</div>
    </div>
    <!-- 大家都在搜 -->
    <div v-show="!fase" class="sear">大家都在搜</div>
    <div v-show="!fase" class="searcontent">
      <ul>
        <li @click="value=item" v-for="(item, index) in searchlists" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div v-show="fase" class="result">
      <div @click="bookdeta(item.id)" v-for="(item, index) in workdetails.slice(i,i+1)" :key="index" class="newbook">
        <div class="left">
          <img :src="item.image" alt=""/>
        </div>
        <div class="right">
          <div class="top">{{ item.title }}</div>
          <div class="centenr">
            {{ item.introduce }}
          </div>
          <div class="bottom">
            <div class="bookname">
              <span class="iconfont icon-31wode"></span>{{ item.name }}
            </div>
            <div class="label">
              <span style="border: 0px"></span><span>{{ item.booktype }}</span
              ><span>{{ item.numberword }}万字</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索数据列表
      searchlists: [
        "被揍就能变强",
        "星界使徒",
        "联盟从4396开始",
        "看个直播，我竟被当成了仙师？",
        "西游，我体内有九只金乌",
        "小兵活下去",
        "重生之似水流年",
        "解构诡异",
        "我的卡牌可以无限合成",
        "我真不是诸神黄昏啊",
      ],
      value:"",//搜索内容
      workdetails:[],//图书数据
      fase:false,//判断是否搜索出来
      i:100,//搜索书记id
      tregat:false,//判断是否有这本书再搜索出来
    };
  },
  methods: {
    // 路由跳转传参
    bookdeta(id) {
      this.$router.push({
        path: "/bookdetails",
        query: {
          id: id
        },
      });
    },
    //点击搜索
    add(){
      this.workdetails.forEach((v,i)=>{
        if(this.value == v.title){
         this.i = i
        }
      });

      //判断搜索弹出
      if(this.value != ""){
        this.fase=true
      }
    },
    //删除
    del(){
      if(this.value == ""){
        this.$router.go(-1)  ;
      }else{
        this.value = ""
      }
      
    }
  },
   created() {
    // this.adplst
    this.$axios.get("/static.json").then((res) => {
      let data = res.data;
      this.workdetails = data.workdetails
    });
  },
  watch:{
    value(){
      //判断搜索弹出
      if(this.value == ""){
        this.fase=false
      }
    }
  }
};
</script>

<style lang="less">
.boxsear {
  .top {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    position: relative;
    height: 44px;
    background-color: white;
    padding: 0px 12px;
    margin-bottom: 12px;
    .icon-31sousuo {
      display: flex;
      height: 70%;
      width: 35px;
      margin-left: 7px;
      text-align: center;
      background-color: #f6f7f9;
      justify-content: center;
      align-items: center;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    input {
      width: 75%;
      border: 0px;
      background-color: #f6f7f9;
      height: 70%;
      font-size: 14px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    input::-webkit-input-placeholder {
      font-size: 14px;
    }
    div {
      margin-left: 10px;
      font-size: 16px;
      color: #78797b;
      font-weight: 600;
    }
  }
  .sear {
    font-size: 12px;
    color: #bbb;
    padding: 8px 0px;
    padding-left: 23px;
    background-color: white;
    border-bottom: 1px solid #ececec;
  }

  .searcontent {
    width: 100%;
    background-color: white;
    height: calc(100vh - 97px);
    ul {
      padding: 5px 10px;
      display: flex;
      flex-wrap: wrap;
      li {
        font-size: 13px;
        color: #a0a0a0;
        border: 1px solid #eaeaea;
        border-radius: 15px;
        padding: 5px 10px;
        margin-top: 10px;
        margin-right: 10px;
        display: inline-block;
      }
    }
  }
  .result{
    display: flex;
    flex-direction: column;
    padding: 0px 15px;
    background-color: white;
    .newbook {
      padding: 10px 0px;
      margin-bottom: 10px;
      width: 100%;
      display: flex;
      border-bottom: 1px solid #ebedf1;
      .left {
        width: 66px;
        height: 88px;
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 269px;
        .top {
          font-size: 16px;
          font-weight: 900;
          color: #33373d;
          height: 20px;
          padding: 0px;
          line-height: 1.4;
          overflow: hidden;
          margin-bottom: 0px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .centenr {
          color: #969ba3;
          font-size: 14px;
          line-height: 1.1875rem;
          display: -webkit-box;
          height: 2.25rem;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin: 6px 0;
        }
        .bottom {
          display: flex;
          color: #969ba3;
          font-size: 12px;
          justify-content: space-between;
          .bookname {
            font-size: 13px;
            .icon-31wode {
              margin-right: 3px;
              font-size: 13px;
            }
          }
          .label {
            display: flex;
            span {
              margin-left: 2px;
              font-size: 12px;
              display: block;
              padding: 1px 2px;
              transform: scale(0.8);
            }
            span:nth-child(1) {
              border: 1px solid #969ba3;
              color: #969ba3;
            }
            span:nth-child(2) {
              border: 1px solid #ed424b;
              color: #ed424b;
            }
            span:nth-child(3) {
              border: 1px solid #008dff;
              color: #008dff;
            }
          }
        }
      }
    }
    .newbook:nth-child(3) {
      border-block: 0px;
    }
  }
}
</style>